<template>
  <div class="box">
    <h3>组合式API</h3>
    <div></div>
    msg:{{ msg }}
    <input type="text" v-model="msg">

    <input type="button" value="加载资源" @click="showmsg()">
    <input type="button" value="重置msg" @click="restmsg()">

    <div ref=divDom>加载的DOM</div>
    <input type="button" value="加载dom" @click="loaddom()">

    <!-- 只读 计算属性 -->
    <p>info{{ cinfo }}</p>
    <input type="text" v-model="cinfo">

  </div>


  <div>text:{{ text }}</div>
  <input type="text" v-model="text" id="">

  <div>user:{{ user }}</div>
  <input type="text" v-model="user.name">
  <input type="button" value="重置user" @click="user={name:'jack'}">


</template>
<script setup>


import { ref, computed, watch } from 'vue'
let msg = ref("msg")
function showmsg() {
  alert(msg.value)
}
const restmsg = function () {
  msg.value = '哈哈哈'
}
let divDom = ref()
function loaddom() {
  console.log(divDom.value);

}


let info = ref('info')
// let cinfo=computed(function(){
//   return  info.value+'.end'
// })
let cinfo = computed({
  get() {
    return info.value + '.end'
  },
  set(nv) {
    info.value = nv
  }
})

let text = ref("text");
watch(text, function (nv, ov) {
  console.log('text被修改', nv, ov);

})

let user=ref({
  name:'jack'
})
watch(user,function(nv,ov){
  console.log('user被修改了',nv,ov);
  
},{
  deep:true
})
</script>